<template>
	<view class="container">
		<view class="avatar">
			<view class="avatar1">
				<img :src="src" alt=""  class="img"/>
				
			</view>
			
		</view>

		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="60">
			<u-form-item label="用户名" prop="username" borderBottom ref="item1">
				<u--input v-model="form.username"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom ref="item1">
				<u--input v-model="form.password" password></u--input>
			</u-form-item>
			
			
			<u-form-item prop="agreement" borderBottom ref="item1">
				<view class="agreement">
					<u-checkbox-group v-model="form.agreement">
						<u-checkbox name="agreement" label="我已阅读并同意" />
						<navigator class="url" url="/pages/index/agreement">用户服务协议、隐私政策</navigator>
					</u-checkbox-group>
				</view>
			</u-form-item>
		</u--form>
		<u-button @click="submit" type="success">提交</u-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '/static/avatar.png',
				form: {
					username: '',
					password: '',
					agreement:false,
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'agreement': {
						type: 'array',
						required: true,
						message: '请阅读用户协议',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async submit() {
				if(this.form.agreement==false){
					this.$refs.uToast.show({
						type: 'error',
						message: "请勾选协议",
					})
					return
				}
				
				let result = await this.$u.api.admin.h5login({
					username: this.form.username,
					password: this.form.password,
				})
				if (result.code == 1) {
					uni.setStorageSync('LoginUser', result.data);
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							uni.switchTab({
								url: '/pages/admin/index'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg,
					})
				}

			}
		},
	}
</script>

<style>
	.avatar1{
		width: 130px;
		height: 130px;
		border-radius: 50%;
		margin: auto;
		margin-top: 50px;
		border-radius: 50%;
		overflow: hidden;
	}
	.img{
		width: 100%;
		height: 100%;
	}
	.container {
		height: 100%;
		margin: 0 80rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
	}

	.u-avatar {
		margin: 80rpx auto 40rpx;
	}

	.xcx {
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto 40rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 20px;
	}

	.img-captcha {
		display: block !important;
	}

	.btn-submit {
		margin-top: 40rpx !important;
	}

	.href-bindmobile {
		margin-top: 40rpx;
		text-align: center;
		font-size: 14px;
		color: var(--color-primary);
	}

	.u-form .u-form-item__body__right__message {
		margin-left: 0px !important;
	}

	/* #ifdef MP-WEIXIN  */
	/deep/.u-form .u-form-item__body__right__message {
		margin-left: 90px !important;
	}

	/* #endif    */

	.agreement {
		margin-top: .7em;
		display: flex;
	}

	.agreement .url {
		color: #3c9cff;
		margin-left: 2px;
	}
</style>